<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList">
		<!-- 顶部固定 -->
		<view slot="top" class="u-p-30">
			<view class="u-p-l-20 u-rela">
				<view class="u-font-30 u-font-bold">
					推荐宣传品套餐
				</view>
				<view class="u-font-22 u-m-t-20">
					选择一个套餐，添加地址下单
				</view>
				<view class="lineBar"></view>
			</view>
		</view>
		<view class="u-p-30">
			<view class="u-p-30 u-type-white-bg u-radius-10 u-m-b-20 list" v-for="(item,index) in dataList" :key="item.id">
				<view class="u-flex">
					<u-image width="195" height="185" :src="item.image" ></u-image>
					<view class="u-m-l-25">
						<view class="u-font-30 u-font-bold">{{item.goods_name}}</view>
						<view class="u-font-24 u-m-t-20 listItem u-w-400 ">
							<view class="u-line-1" v-for="(t,i) in item.param" :key="i">{{t}}</view>
						</view>
					</view>
				</view>
				<u-line color="#fff" margin="7.5rpx 0"></u-line>
				<view class="u-flex u-row-right" >
					<u-button type="success" shape="circle" :custom-style="{background: '#009774',fontSize: '24rpx',width: '150rpx',height: '50rpx'}" @click="$u.route('/pages/goods/detail?id='+ item.id)">立即领取</u-button>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	export default {
		data() {
			return {
				dataList: []
			};
		},
		onLoad(){
		},
		methods: {
			//请求数据
			queryList(pageNo, pageSize) {
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过this.$refs.paging.complete(请求回来的数组)将请求结果传给z-paging
				this.$u.api.getGoodsList({
					page: pageNo,
				}).then(res => {
					//请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
					this.$refs.paging.complete(res.data.data);
				}).catch(res => {
					//如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
					//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.ranking{
		position: absolute;
		top:50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: #fff;
		font-size: 20rpx;
	}
	
	
	.listItem{
		color: #666666;
		line-height: 36rpx;
	}
	
	.lineBar{
		position: absolute;
		left: 0;
		top: 5rpx;
		bottom: 5rpx;
		width: 5rpx;
		background-color: #009774;
		border-radius: 30rpx;
	}
	.list{
		border: 4rpx solid #25916F;
		.listItem{
			color: #666666;
			line-height: 36rpx;
		}
	}
</style>